<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>设备维修申请表登记</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/layui.css"  media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/toastr.min.css"  media="all">
</head>
<body>
<div class="demoTable" style="padding:10px 0 0 15px">
    <div class="layui-inline">
        <input class="layui-input" name="keyword" id="keyword" placeholder="请输入设备名称" autocomplete="off">
    </div>
    <button class="layui-btn layui-btn-blue" style="margin: 0 0 0 10px" data-type="reload"><i class="layui-icon layui-icon-search">搜索</i></button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-blue" lay-event="add"><i class="layui-icon layui-icon-add-1">新增</i></button>
		<button class="layui-btn layui-btn-blue" lay-event="delete"><i class="layui-icon layui-icon-delete">批量删除</i></button>
	</div>
</script>
<script type="text/html" id="rowToolbar">
	<%--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>--%>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="${pageContext.request.contextPath }/assets/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/layui.all.js"></script>
<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/js/toastr.min.js" charset="utf-8"></script>
<script type="text/javascript">
layui.use(['table','layer','upload','form'], function(){
	var table = layui.table;
	var layer = layui.layer;
    var laydate = layui.laydate;
    var form = layui.form;

    var $ = layui.jquery, active = {
        reload:function () {
            var keyword01 = $("#keyword").val();
            console.log(keyword)
            table.reload('contenttable',{
                method:'get',
                where:{keyword01:keyword01}
            });
        }
    }
    $('.layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    table.render({
        elem: '#test'
        ,url:'${pageContext.request.contextPath }/maintResume/queryMaintenanceRecord.do'
        //,toolbar: '#toolbarDemo'
        ,title: '用户数据表'
        ,id :'contenttable'
        ,limits:[10,20,30]
        ,cols: [[
            {type: 'checkbox', fixed: 'left'}
            ,{field:'id', title:'ID', fixed: 'left', unresize: true, sort: true, type:'numbers'}
            ,{field:'deviceName', title:'设备名称'}
            ,{field:'deviceNo', title:'设备编号'}
            ,{field:'deviceVersion', title:'设备型号'}
            ,{field:'maintainType', title:'保养类别'}
            ,{field:'maintainCycle', title:'保养周期'}
            ,{field:'maintainTime', title:'保养时间'}
            ,{field:'maintainResult', title:'保养结果'}
            ,{field:'maintainRemark', title:'备注'}
            ,{field:'op1', title:'保养项目', templet:function (rowData){
                return "<a href='javascript:void(0)' style='color:#4D61B3' onclick='maintenanceRecordDetailEvent(\""+rowData.id+"\")'>"+'查看详细'+"</a>";
            }}
            //,{field: 'right', title:'操作', toolbar: '#rowToolbar', align: 'center'}
        ]]
        ,page: true
    });
  
	//头工具栏事件
	table.on('toolbar(test)', function(obj){
		var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
            case 'add':
                layer.open({
                    type: 1 					//Page层类型
                    ,area: ['760px', '450px'] //宽  高
                    ,title: '新增'
                    ,shade: 0.6 				//遮罩透明度
                    ,maxmin: true 			//允许全屏最小化
                    ,anim: 1 					//0-6的动画形式，-1不开启
                    ,content: '<form class="layui-form" id="addformID">'+
                        '<div style="border: 1px solid #E6E6E6; margin: 15px 15px; width: 715px">'+
                        '<table>'+
                        '<tr>'+
                        	'<td><label class="layui-form-label" style="margin-left:-10px; margin-top:9px">设备编号</label></td>&nbsp;'+
                        	'<td>'+
	                        	'<div class="layui-input-block" style="width: 230px; margin-top: 10px; margin-left:-3px">'+
									'<select class="layui-select" id="deviceNo" name="deviceNo" lay-filter="displayInfo" lay-verify="deviceNo">'+
										'<option value="">请选择</option>'+
									'</select>'+
								'</div>'+
                        	'</td>'+
		                    '<td><label class="layui-form-label" style="margin-left:-10px; margin-top:9px">设备名称</label></td>'+
		                    '<td><input class="layui-input" type="text" id="deviceName" name="deviceName" style="width:230px; margin-top:10px; margin-left:-2px; display: inline;"></td>'+
                        '</tr>'+
                        '</table>'+
                        '&emsp;&emsp;设备型号&emsp;<input class="layui-input" type="text" id="deviceVersion" name="deviceVersion" value="" style="width:230px; margin-top:15px; display: inline;">'+
                        '&emsp;&emsp;保养类别&emsp;<input class="layui-input" type="text" id="maintainType" name="maintainType" style="width:230px; margin-top:15px; display: inline;"><br>'+
                        '&emsp;&emsp;保养周期&emsp;<input class="layui-input" type="text" id="maintainCycle" name="maintainCycle" style="width:230px; margin-top:15px; display: inline;">'+
                        '&emsp;&emsp;保养时间&emsp;<input class="layui-input" type="text" id="maintainTime" name="maintainTime" style="width:230px; margin-top:15px; display: inline;">'+
                        '<div style="width: 100px; height: 30px; margin-left: 130px; margin-top: 15px; float: left;">保养项目</div>'+
                        '<div style="width: 100px; height: 30px; margin-left: 140px; margin-top: 15px; float: left;">结果</div>'+
                        '<div style="width: 100px; height: 30px; margin-left: 100px; margin-top: 15px; float: left;">备注</div>'+
                        '<input class="layui-input" id="maintainItem" name="maintainItem" type="text" style="width:160px; margin-left: 90px; margin-top:5px; display: inline;">'+
                        '<input class="layui-input" id="result" name="result" type="text" style="width:160px; margin-left: 60px; margin-top:15px; display: inline;">'+
                        '<input class="layui-input" id="remark" name="remark" type="text" style="width:160px; margin-left: 27px; margin-top:15px; display: inline;"><br>'+

                        '<input class="layui-input" id="maintainItem" name="maintainItem" type="text" style="width:160px; margin-left: 90px; margin-top:15px; display: inline;">'+
                        '<input class="layui-input" id="result" name="result" type="text" style="width:160px; margin-left: 60px; margin-top:15px; display: inline;">'+
                        '<input class="layui-input" id="remark" name="remark" type="text" style="width:160px; margin-left: 27px; margin-top:15px; display: inline;"><br>'+

                        '<input class="layui-input" id="maintainItem" name="maintainItem" type="text" style="width:160px; margin-left: 90px; margin-top:15px; margin-bottom:15px; display: inline;">'+
                        '<input class="layui-input" id="result" name="result" type="text" style="width:160px; margin-left: 60px; margin-top:15px; margin-bottom:15px; display: inline;">'+
                        '<input class="layui-input" id="remark" name="remark" type="text" style="width:160px; margin-left: 27px; margin-top:15px; margin-bottom:15px; display: inline;"><br>'+
                        '&emsp;&emsp;保养结果&emsp;'+
                        '<textarea class="layui-textarea" id="maintainResult" name="maintainResult" style="width: 577px; height: 100px; margin-top: 10px; margin-left: 90px; margin-bottom: 15px"></textarea>'+
                        '&emsp;&emsp;备注&emsp;'+
                        '<textarea class="layui-textarea" id="maintainRemark" name="maintainRemark" style="width: 577px; height: 100px; margin-top: 10px; margin-left: 90px; margin-bottom: 15px"></textarea>'+
                        '</div>'+
                        '<button class="layui-btn layui-btn-blue" lay-submit lay-filter="addform" style="margin-left:250px; margin-top: 25px; margin-bottom: 25px">立即提交</button>&emsp;&emsp;&emsp;&emsp;'+
                        '<button type="reset" class="layui-btn layui-btn-primary">重置</button>'+
                        '</form>'
                    ,success:function(){
                        //保养时间
                        laydate.render({
                            elem: '#maintainTime',
                            type: 'datetime'
                        });
                      	//下拉查找所有设备
                        $.ajax({	
    		  	            type: 'POST',
    		  	            url: '${pageContext.request.contextPath}/device/queryAllDeviceList.do',
    		  	            dataType: 'json',
    		  	            async: false,
    		  	            success: function (data){
    		  	                for (var i = 0; i < data.length; i++) {
    		  	                    $("#deviceNo").append("<option value='"+ data[i].deviceNo +"'>"+ data[i].deviceNo +"</option>");
    		  	                }
    		  	            }
    		  	        });
                        layui.form.render('select');
                    }
                });
            break;
            //批量删除
            case 'delete':
                var data = checkStatus.data;
                var idArr = new Array();
                if(data.length==0){
                    toastr.warning("请至少选择一条记录！");
                }
                for(var i=0;i<data.length;i++){
                    idArr[i] = data[i].id;
                }
                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath }/maintResume/deleteMaintenanceRecordById.do',
                    data:{"idArr" : idArr},
                    success:function(data){
                        layer.confirm('确定删除吗？', function(index){
                            if(data > 0){
                                toastr.success("删除成功！");
                                location.reload();
                                /*setTimeout(function(){
                                    //使用setTimeout（）方法设定定时2000毫秒
                                    //关闭模态框
                                    //父页面刷新
                                    window.location.reload();
                                },2000);*/
                            }else{
                                toastr.warning("删除失败！");
                                location.reload();
                            }
                        });
                    }
                });
            break;
	    };
	});

    //监听行工具事件
    table.on('tool(test)', function(obj){
        var data = obj.data;
        var idArr = new Array();
        /*console.log(obj)*/
        //单个删除
        if(obj.event === 'del'){
            layer.confirm('确定删除吗？', function(index){
                var id = obj.data.id;
                idArr[0] = id;
                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath }/maintResume/deleteMaintenanceRecordById.do',
                    data:{ "idArr" : idArr },
                    success:function(data){
                        if(data > 0){
                            toastrStyle();
                            toastr.success("删除成功！");
                            setTimeout(function(){
                                location.reload();
                            },1000);
                            /*setTimeout(function(){
                                //关闭模态框
                                //父页面刷新
                                window.location.reload();
                            },2000);*/
                        }else{
                            toastrStyle();
                            toastr.warning("删除失败！");
                            setTimeout(function(){
                                location.reload();
                            },1000);
                        }
                    }
                })
                layer.close(index);
            });
        }
    });

    /**
     * 通用表单提交(AJAX方式)（设备维修申请表登记）
     */
    form.on('submit(addform)', function (data) {
        $.ajax({
            url : '${pageContext.request.contextPath}/maintResume/addMaintenanceRecord.do',
            data: $("#addformID").serialize(),
            cache : false,
            type : "post",
        }).done(
            function(res) {
                if (res > 0) {
                    toastrStyle();
                    toastr.success('添加成功！');
                    setTimeout(function(){
                        location.reload();

                    },1000);
                }
            }
        ).fail(
            function(res) {
                toastrStyle();
                toastr.error('添加失败！');
                setTimeout(function(){
                    location.reload();
                },1000);
            }
        )
        return false;
    });
    
  	//查找带回
    form.on('select(displayInfo)', function(data){
    	$.ajax({
            type: 'POST',
            url: '${pageContext.request.contextPath}/device/queryDeviceInfoByNo.do',
            data: {deviceNo:$('#deviceNo').val()},
            /* dataType: 'json', */
            /* async: false, */
            success: function (data){
            	var device = eval('(' +data+ ')');
            	$('#deviceName').val(device.deviceName);
            	$('#deviceVersion').val(device.deviceVersion);
            }
        });
    });
});
toastr.options.positionClass = 'toast-top-center'; //提示框的位置设置为中上
//提示框样式
function toastrStyle(){
    toastr.options = {
        "closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": false,
        "positionClass": "toast-top-center",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "5000",
        "hideDuration": "1000",
        "timeOut&quot": "100000",
        "extendedTimeOut": "0",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
}

//根据申请表ID查询保养详细
function maintenanceRecordDetailEvent(mId){
	layer.open({
        type: 1 					//Page层类型
        ,area: ['500px', '450px']   //宽  高
        ,title: '保养项目明细'
        ,shade: 0.6 				//遮罩透明度
        ,maxmin: true 			    //允许全屏最小化
        ,anim: 1 					//0-6的动画形式，-1不开启
        /* ,content: $("#lookupTable2") */
        ,content: '<table class="layui-hide" id="lookupTable1" lay-filter="lookupTable1"></table>'
        ,success: function(){
            layui.use(['table'], function(){
                var table = layui.table;
                table.render({
                    elem: '#lookupTable1'
                    ,url:'${pageContext.request.contextPath }/maintResume/queryMaintenanceRecordDetailById.do?mId='+mId
                    /*,where:{dId:thisRowId.id}*/
                    /*,toolbar: '#toolbar'*/
                    ,title: '保养项目明细'
                    ,id :'contenttable'
                    ,limits:[10,20,30]
                    ,cols: [[
                        /*{type: 'checkbox', fixed: 'left'},*/
                        {field:'id', title:'ID', fixed: 'left', unresize: true, sort: true, type:'numbers'},
                        {field:'maintainItem', title:'保养项目'},
                        {field:'remark', title:'结果'},
                        {field:'result', title:'备注'}
                    ]]
                    ,page: false
                });
                //行单击事件
                /* table.on('row(lookupTable2)', function(obj){
                  alert("单击事件")
                }); */
                //行双击事件
                /*table.on('rowDouble(lookupTable1)', function(rowData){
                    console.log(rowData.data.uaddress);
                    layer.closeAll();
                    $("#deviceName").val(rowData.data.uaddress);
                    $("#deviceNo").val(rowData.data.uname);
                });*/
            });
        }
    });
}
</script>
</body>
</html>